import QtQuick 2.3
import QtQuick.Layouts 1.1

import "../../js/UI.js" as Style

Item {
    id: icon
    signal clicked()

    property alias iconTextVisible: iconText.visible
    property size  iconSize: Qt.size(33, 33)
    property alias iconText: iconText.text
    property alias activeIconOpacity: activeIconImage.opacity
    property alias activeIconSource: activeIconImage.source
    property alias inactiveIconSource: inactiveIconImage.source
    property alias iconMouseArea: mouseArea
    property alias m_icon: inactiveIconImage

    ColumnLayout {
        id: columnLayout
        anchors.centerIn: parent
        spacing: 0
        Item {
            width:  iconSize.width
            height: iconSize.height
            anchors.horizontalCenter: parent.horizontalCenter
            Image {
                id: activeIconImage
                anchors.fill: parent
                //  fillMode: Image.PreserveAspectFit
                //以下改动更好的使用了svg图片
                  sourceSize.width: iconSize.width
                   sourceSize.height: iconSize.height
                opacity: 1
                Behavior on opacity {
                    NumberAnimation { duration: 100 }
                }
            }
            Image {
                id: inactiveIconImage
                anchors.centerIn: parent
                anchors.fill: parent
                sourceSize.width: iconSize.width
                 sourceSize.height: iconSize.height
                //fillMode: Image.PreserveAspectFit
                opacity: 1 - activeIconImage.opacity
            }
        }

        AText {
            id: iconText
            anchors.horizontalCenter: parent.horizontalCenter
            Layout.fillWidth: true
            verticalAlignment: Text.AlignBottom
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 13
            color: activeIconImage.opacity == 0? "#999999": Style.textCommonColor
        }
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            icon.clicked();
        }
    }
}
